<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card class="card" shadow="never">
        <div class="left">
          <el-form label-width="80px" :model="queryInfo">
            <div class="left_name">
              <el-form-item label="目录名称" prop="directoryName">
                <el-input class="input" v-model="queryInfo.directoryName"></el-input>
              </el-form-item>
            </div>
            <div class="left_state">
              <el-form-item label="状态">
                <el-select placeholder="请选择" v-model="queryInfo.state">
                  <el-option label="启用" value="1"></el-option>
                  <el-option label="禁用" value="0"></el-option>
                </el-select>
              </el-form-item>
            </div>
            <div class="left_btn ">
              <el-form-item>
                <el-button size="mini" @click="clearList">清除</el-button>
                <el-button type="primary" size="mini" @click="getList">搜索</el-button>
              </el-form-item>
            </div>
          </el-form>
        </div>
        <div class="right">
          <el-button type="text" size="mini" v-if="$route.query.id" @click="$router.go(-1)"
            ><i class="el-icon-back"></i>返回学科</el-button
          >
          <el-button type="success" size="mini" @click="openAdd"><i class="el-icon-edit"></i>新增目录</el-button>
        </div>
        <div class="alert">
          <el-alert :title="'数据一共' + total + '条'" type="info" show-icon> </el-alert>
        </div>
        <el-table :data="list" style="width: 100%">
          <el-table-column label="序号" type="index"> </el-table-column>
          <el-table-column label="所属学科" prop="subjectName"> </el-table-column>
          <el-table-column label="目录名称" prop="directoryName"> </el-table-column>
          <el-table-column label="创建者" prop="username"> </el-table-column>
          <el-table-column label="创建日期" prop="addDate" width="200">
            <template v-slot="{ row }">
              {{ row.addDate | trunDate }}
            </template>
          </el-table-column>
          <el-table-column label="面试题数量" prop="totals"> </el-table-column>
          <el-table-column label="状态" prop="state">
            <template v-slot="{ row }">
              {{ row.state | getState }}
            </template>
          </el-table-column>
          <el-table-column label="操作" width="150">
            <template slot-scope="scope">
              <el-button type="text" @click="changeState(scope.row)">{{
                scope.row.state === 0 ? '启用' : '禁用'
              }}</el-button>
              <el-button type="text" @click="editOpen(scope.row)" :disabled="scope.row.state === 1"> 修改</el-button>
              <el-button type="text" @click="delDir(scope.row)" :disabled="scope.row.state === 1"> 删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页组件 -->
        <el-pagination
          class="pagination"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="page"
          :page-sizes="pagesizes"
          :page-size="pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </el-card>
      <!-- 新增面板 -->
      <directorysAdd ref="edit" :dialogShow.sync="dialogShow" :subjectList="subjectList"></directorysAdd>
    </div>
  </div>
</template>

<script>
import { list as getCompanys } from '@/api/hmmm/companys'
import { list as getQuestion } from '@/api/hmmm/questions'
import { list as createAPI, list, simple, remove, changeState } from '@/api/hmmm/directorys.js'
import { list as subjestApi } from '@/api/hmmm/subjects.js'
export default {
  created() {
    getCompanys()
    getQuestion()
    createAPI()
    if (this.$route.query.id) {
      this.queryInfo.subjectID = this.$route.query.id
    }
    this.getList()
    simple()
    this.getsubjestList()
  },
  data() {
    return {
      // dialogShow控制新增面板的显示与隐藏
      dialogShow: false,
      editform: {
        directoryName: '',
        subjectID: ''
      },
      // 获取查询目录信息的参数
      queryInfo: {
        // 当前的页数
        page: 1,
        // 每页显示的数据条数
        pagesize: 10,
        subjectID: null,
        directoryName: null,
        state: null
      },
      // 所属学科目录
      subjectList: [],
      list: [],
      // 当前选中的页码
      page: 1,
      // 页容量的集合
      pagesizes: [5, 10, 20, 50],
      // 选中的页容量
      pagesize: 10,
      // 总条数
      total: 0,
      subjectID: null
    }
  },
  methods: {
    // 点击清除 清除选择的数据
    clearList() {
      this.queryInfo.directoryName = ''
      this.queryInfo.state = ''
      // 更新列表
      this.getList()
    },
    // 点击切换状态
    async changeState(row) {
      try {
        await changeState({
          id: row.id,
          state: row.state === 0 ? 1 : 0
        }) // 判定状态 0 的话 变为1 ,1 的话变为0
        row.state = row.state === 0 ? 1 : 0
        this.$message.success('操作成功')
      } catch (err) {
        this.$message.error('操作失败')
      }
    },
    // 获取学科名称列表
    async getsubjestList() {
      try {
        const res = await subjestApi()
        console.log(res)
        this.subjectList = res.data.items
        console.log(this.subjectList)
      } catch (err) {
        this.$message.error('获取学科列表失败')
      }
    },
    // 删除目录
    delDir(data) {
      const { id } = data
      // 询问用户是否删除
      this.$confirm('此操作将永久删除该目录, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          // 提交要删除的数据到服务
          await remove({ id })
          if (this.list.length === 1 && this.queryInfo.page > 1) this.queryInfo.page--
          console.log(this.page)
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
          // 问题:只有一条数据时删除后数据显示为空的问题
          // 解决办法:数据只有一条并且当前页>1 ,才让当前页减1

          // 更新数据
          this.getList()
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    // 编辑目录
    async editOpen(id) {
      this.dialogShow = true
      // 调用edit中的方法 getUpdate
      this.$refs.edit.getUpdate(id)
      // 新增面板下拉框中的数据
      // 获取里面的数据
      // const res = await simple()
      const res = await subjestApi()
      this.subjectList = res.data.items
      // 更新数据
      this.getList()
    },
    // 点击新增目录,弹出弹框
    async openAdd() {
      this.dialogShow = true
      // 获取里面的数
      const res = await subjestApi()
      // 新增面板下拉框中的数据
      this.subjectList = res.data.items
      // 更新数据
      this.getList()
    },
    // 当页容量改变时会触发
    handleSizeChange(size) {
      // 将改变后的页容量赋值给页容量
      this.queryInfo.pagesize = size
      // 更新数据
      this.getList()
    },
    // 当前页发生变化时会触发
    handleCurrentChange(page) {
      // 将改变后的页码赋值给当前页
      this.queryInfo.page = page
      // 更新数据
      this.getList()
    },
    // 获取目录列表
    async getList() {
      try {
        const res = await list(this.queryInfo)
        console.log(res)
        this.list = res.data.items
        this.total = res.data.counts
      } catch (err) {
        this.$message.error('获取目录列表失败')
      }
    }
  },

  components: {
    directorysAdd: () => import('../components/directorys-add.vue')
  }
}
</script>

<style lang="scss" scoped>
.left {
  display: inline-block;
}
.left_name {
  display: inline-block;
}
.left_state {
  display: inline-block;
}
.left_btn {
  display: inline-block;
  height: 32px;
}
.right {
  display: inline-block;
  position: absolute;

  right: 20px;
}
.input {
  width: 200px;
}
.card {
  position: relative;
}
button.el-button.el-button--default.el-button--mini {
  height: 32px;
}
button.el-button.el-button--primary.el-button--mini {
  height: 32px;
}
button.el-button.el-button--success.el-button--mini {
  height: 32px;
}
.pagination {
  text-align: right;
}
.alert {
  margin-bottom: 15px;
}
.el-icon-info {
  height: 16px;
  width: 16px;
}
</style>
